<template>
  <el-card class="query-panel" shadow="never">
    <el-form :model="modelValue" label-width="80px">
      <el-row :gutter="20">
        <template v-for="field in fields" :key="field.prop">
          <el-col :span="field.span || 6">
            <el-form-item :label="field.label">
              <!-- 输入框 -->
              <el-input
                v-if="field.type === 'input'"
                v-model="modelValue[field.prop]"
                :placeholder="field.placeholder || `请输入${field.label}`"
                :clearable="field.clearable !== false"
                @keyup.enter="handleSearch"
              />
              
              <!-- 选择框 -->
              <el-select
                v-else-if="field.type === 'select'"
                v-model="modelValue[field.prop]"
                :placeholder="field.placeholder || `请选择${field.label}`"
                :clearable="field.clearable !== false"
                style="width: 100%"
              >
                <el-option
                  v-for="option in field.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              
              <!-- 日期选择器 -->
              <el-date-picker
                v-else-if="field.type === 'date'"
                v-model="modelValue[field.prop]"
                type="date"
                :placeholder="field.placeholder || `请选择${field.label}`"
                :clearable="field.clearable !== false"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
        </template>
        
        <el-col :span="actionsSpan" class="actions">
          <el-button
            v-for="action in actions"
            :key="action.name"
            :type="action.type"
            @click="handleAction(action.name)"
          >
            {{ action.label }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 字段配置类型
interface FieldConfig {
  prop: string
  label: string
  type: 'input' | 'select' | 'date'
  placeholder?: string
  clearable?: boolean
  span?: number
  options?: Array<{ label: string; value: string | number }>
}

// 操作按钮配置类型
interface ActionConfig {
  name: string
  label: string
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | ''
}

interface Props {
  modelValue: Record<string, any>
  fields: FieldConfig[]
  actions?: ActionConfig[]
  actionsSpan?: number
}

interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'action', name: string): void
}

const props = withDefaults(defineProps<Props>(), {
  actions: () => [
    { name: 'search', label: '查询', type: 'primary' },
    { name: 'reset', label: '重置', type: '' }
  ],
  actionsSpan: 24
})

const emit = defineEmits<Emits>()

const modelValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleSearch = () => {
  emit('action', 'search')
}

const handleAction = (name: string) => {
  emit('action', name)
}
</script>

<style scoped>
.query-panel {
  margin-bottom: 20px;
}

.actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: flex-end;
}
</style>